<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>HOME</title>
    <!-- Demo styles -->
    <style>


    </style>
    <script src="./font_ico/iconfont.js"></script>
    <!-- 引用bootstrap核心css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 引用动画库 -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- 引用重置样式表 -->
    <link rel="stylesheet/less" href="css/reset.less">

    <!-- 引用公共样式 -->
    <link rel="stylesheet/less" href="css/common.less">

    <!-- 引用该页面样式 -->
    <link rel="stylesheet/less" href="css/index.less">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

</head>

<body>
<div class="warp">
    <div class="nav-mtop">
        <div>
            <div class="nav-mtop-l">
                <div><img src="" alt=""><span>Call Us: (0) 123 456 789</span></div>
                <div><img src="" alt=""><span>jetspace@mail.com</span></div>
            </div>
            <div class="nav-mtop-r"><img src="./images/gq1024.png" alt=""><select>
                <option>中国</option>
            </select></div>
        </div>

    </div>
    <header class="header" id="header">
        <!-- 导航 -->
        <nav class="navbar navbar-inverse">
            <div class="container">
                <!-- 移动端的导航按钮 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo -->
                    <a class="navbar-brand wow fadeInLeft" href="./index.html"><img src="./images/logo.png"></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <!-- 导航栏 -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- HOME          About          SERVICES          portfolio        -->
                        <li><a href="./index.html" class="wow fadeInRight" data-wow-delay="100ms">HOME</a></li>
                        <li><a href="./template/about.html" class="wow fadeInRight" data-wow-delay="200ms">About</a></li>
                        <li><a href="./template/servers.html" class="wow fadeInRight" data-wow-delay="300ms">SERVICES</a></li>
                        <li><a href="./template/blog.html" class="wow fadeInRight" data-wow-delay="300ms">BLOG</a></li>
                        <li><a href="./template/contact.html" class="wow fadeInRight" data-wow-delay="600ms">CONTACT</a></li>
                        <li>
                            <div><input type="text" placeholder="Search"> <img src="./images/ssIcon.png" alt=""></div>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <div class="mid-title">
        <div>
            <h1>Super fast servers</h1>
            <p class="p1">SAFE,FAST AND AWESOME PRICE</p>
            <p class="p2">Vestibulum ac diam sit amet quam vehicula elementum sed sit am</p>
            <ul>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gougou"></use>
                    </svg>
                    Super Special Offer/$2,99/MO
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gougou"></use>
                    </svg>
                    Unlimited Bandwidth and Space
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gougou"></use>
                    </svg>
                    Daily Backups
                </li>
            </ul>

        </div>
        <img src="./images/Clouds&Servers.png" alt="">
    </div>
    <div class="tips">
        <p class="p1">We have awesome plans and prices</p>
        <p class="p2">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
            Donec sollicitudin molestie malesuada. Pellentesque in ipsum
        </p>
    </div>
    <div class="banner">
        <div class="banner-out">
            <div class="banner-in">
                <div><img src="images/21.PNG"></div>
                <div> <h3>Fast Servers</h3></div>
                <div>Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</div>
            </div>
            <div class="banner-in">
                <div><img src="images/21.PNG"></div>
                <div> <h3>Fast Servers</h3></div>
                <div>Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</div>
            </div>
            <div class="banner-in">
                <div><img src="images/21.PNG"></div>
                <div> <h3>Fast Servers</h3></div>
                <div>Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</div>
            </div>
        </div>
    </div>
    <div class="title-h">
        <h1>The Team</h1>
    </div>
    <div class="btn-search">
        <div class="btn-search-in">
            <h3>Check your domain name</h3>
            <p>Enter the domain name to register or transfer</p>
            <div class="btn-search-bt">
                <div>
                    <input type="text">
                    <select>
                        <option>.com</option>
                        <option>.com</option>
                        <option>.com</option>
                    </select>
                </div>


                <a href="">Search Domain</a>
                
            </div>
        </div>
    </div>

    <div class="container-fluid mune">
            <div class="row munelist">
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="mune-tp">
                        <span>BASIC</span>
                        <span >9,99</span>
                        <span>/mo</span>
                    </div>
                    <div class="mune-bt">
                        <div>
                            <img class="ig1" src="./images/Map.png" alt="">
                            <img class="ig2" src="./images/Server.png" alt="">
                            <img class="ig3" src="./images/Clouds2.png">
                        </div>
                        <div class="mune-bt2">
                            <ul>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20GB Storage
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1000 Mail Accounts
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20 Databases
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1GB Rams
                                </li>
                            </ul>
                            <a href="">Buy Now</a>
                        </div>

                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="mune-tp">
                        <span>BASIC</span>
                        <span >9,99</span>
                        <span>/mo</span>
                    </div>
                    <div class="mune-bt">
                        <div>
                            <img class="ig1" src="./images/Map.png" alt="">
                            <img class="ig2" src="./images/Server.png" alt="">
                            <img class="ig3" src="./images/Clouds2.png">
                        </div>
                        <div class="mune-bt2">
                            <ul>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20GB Storage
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1000 Mail Accounts
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20 Databases
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1GB Rams
                                </li>
                            </ul>
                            <a href="">Buy Now</a>
                        </div>

                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="mune-tp">
                        <span>BASIC</span>
                        <span >9,99</span>
                        <span>/mo</span>
                    </div>
                    <div class="mune-bt">
                        <div>
                            <img class="ig1" src="./images/Map.png" alt="">
                            <img class="ig2" src="./images/Server.png" alt="">
                            <img class="ig3" src="./images/Clouds2.png">
                        </div>
                        <div class="mune-bt2">
                            <ul>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20GB Storage
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1000 Mail Accounts
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20 Databases
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1GB Rams
                                </li>
                            </ul>
                            <a href="">Buy Now</a>
                        </div>

                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <div class="mune-tp">
                        <span>BASIC</span>
                        <span >9,99</span>
                        <span>/mo</span>
                    </div>
                    <div class="mune-bt">
                        <div>
                            <img class="ig1" src="./images/Map.png" alt="">
                            <img class="ig2" src="./images/Server.png" alt="">
                            <img class="ig3" src="./images/Clouds2.png">
                        </div>
                        <div class="mune-bt2">
                            <ul>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20GB Storage
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1000 Mail Accounts
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    20 Databases
                                </li>
                                <li>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-gougou"></use>
                                    </svg>
                                    1GB Rams
                                </li>
                            </ul>
                            <a href="">Buy Now</a>
                        </div>

                    </div>
                </div>
            </div>
    </div>

    <div class="btn-search">
        <div class="btn-search-in">
            <h3>Feel free to contact us for custom plans</h3>
            <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at</p>


                <a href="">Contact Us</a>

    </div>
</div>

    <div class="end container-fluid">
        <div class="endlist row">
            <div class="col-lg-3 col-md-6">
                <p class="p1">Menu</p>
                <ul>
                    <li>HOME</li>
                    <li>SERVICES</li>
                    <li>ABOUT US</li>
                    <li>BLOG</li>
                    <li>CONTACT US</li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 ">
                <p class="p1">We Offer</p>
                <ul>
                    <li>BUSINESS HOSTING</li>
                    <li>PRIVATE HOSTING</li>
                </ul>
                <p class="p1">Service</p>
                <ul>
                    <li>FIRST SERVICE</li>
                    <li>SECOND SERVICE</li>
                    <li>FIRST SERVICE</li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 ">
                <p class="p1">Our Blog</p>
                <p class="p2">Lorem Ipsum sample text</p>
                <p class="p3">Vivamus suscipit tortor eget felis porttitor
                     volutpat. Curabitur arcu erat, accumsan id
                     imperdiet et, porttitor at sem. Curabitur arcu
                     erat, accumsan.
                     </p>
                <p class="p4">Read More</p>
            </div>
            <div class="col-lg-3 col-md-6 ">
                <p class="p1">We Are Social</p>
                <img src="./images/Social%20Icons.png" alt="">
            </div>
        </div>
        <img src="./images/Clouds3.png" alt="">
    </div>


</div>
</body>

</html>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.repeat.js"></script>
<script src="js/less.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>

<script>
    //实例化wow.js
    new WOW().init();
    var swiper = new Swiper(".mySwiper", {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

</script>